<template>
    <h2 class="text-align-center">理财羡慕列表</h2>
    理财编号<input type="text" placeholder="请输入理财编号" v-model="id">
    理财名称<input type="text" placeholder="请输入理财名称" v-model="name">

    理财收益<input type="text" v-model="price1" >-<input type="text" v-model="price2" >
    
    <button @click="show" >查询</button>
    
    <table class="table table-bounded">
        <thead>
            <tr style="background-color: aqua;">
                <th>理财编号</th>
                <th>理财名称</th>
                <th>年收益</th>
                <th>月收益</th>
                <th>最低金额</th>
                <th>理财人数</th>
                <th>风险等级</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in info">
                <th>{{item.F_id}}</th>
                <th>{{item.F_name}}</th>
                <th>{{item.F_APY}}</th>
                
                <th>{{(item.F_APY/12).toFixed(2)}}CNY</th>
                <th>{{item.F_MinMoney}}</th>
                <th>{{item.F_number}}</th>
                <th>{{item.F_level==0?'低':item.F_level==1?'中':'高'}}</th>
                <th>
                    
                    <a href="#" @click="del(item.F_id)">删除</a>
                    <a href="#" @click="Upd(item.F_id)">修改</a>
                </th>
            </tr>
        </tbody>
    
    </table>
    <span>
        总共有{{page.listCount}}条记录，当前是第{{page.pageIndex}}页，每页显示{{page.pageSize}}条记录，总共{{page.pageCount}}页
        </span>
        <a href="#" @click="pages('first')">首页</a>
        <a href="#" @click="pages('up')">上一页</a>
        <a href="#" @click="pages('down')">下一页</a>
        <a href="#" @click="pages('last')">尾页</a>
</template>
<script setup lang="ts">
import { ref,onMounted } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';

const info = ref({
    F_id:0,
    F_name:'',
    F_APY:'',
    F_MinMoney:'',
    F_number:'',
    F_level:0,
    I_id:0,
})

onMounted(()=>{
    show();
})

const router = useRouter();
const id = ref('');
const name = ref('');
const price1 = ref('');
const price2 = ref('');


const page = ref({
    pageIndex:1,
    pageSize:2,
    listCount:0,
    pageCount:0,
})

const show = ()=>{
    axios.get('http://localhost:58004//api/Finan/ShowFinan',{
        params:{
            id:id.value,
            name:name.value,
            price1:price1.value,
            price2:price2.value,
            pageIndex:page.value.pageIndex,
            pageSize:page.value.pageSize,
        }
    })
    .then(res=>{
        console.log(res.data);
        info.value = res.data.Plist;
        page.value.listCount = res.data.listCount;
        page.value.pageCount = res.data.pageCount;
        console.log(page.value.pageCount);
        console.log(page.value.listCount);
    })
    .catch
    (err=>{
        console.log(err);
    })
}

const pages = (msg:string) =>{
    switch(msg)
    {
        case 'first':
            page.value.pageIndex=1;
            break;
        case 'last':
            page.value.pageIndex=page.value.pageCount;
            break;
        case 'up':
            if(page.value.pageIndex>1)
            {
                page.value.pageIndex--;
            }
            else
            {
                alert("已经是第一页了")
                return;
            }
            break;
            case 'down':
            if(page.value.pageIndex<page.value.pageCount)
            {
                page.value.pageIndex++;
            }
            else
            { 
                alert("已经是最后一页了")
                return;
            }
            break;
            
        
    }
            show();
}

const del = (id:number)=>{
    if(confirm("确定要删除吗？"))
    {
        axios.get('http://localhost:58004//api/Finan/DelFinan',{
        params:{
            id:id,
        }
    })
    .then(res=>{
        console.log(res.data);
        if(res.data>0)
        {
            alert("删除成功");
            show();
        }
        else if(res.data==-1)
        {
            alert("已经有人理财，不能删除");
        }
        else
        {
            alert("删除失败");
        }
        
    })
    .catch
    (err=>{
        console.log(err);
    })
    }
}


const Upd = (id:number)=>{
    router.push({
        path:'/UpdFinan',
        query:{
            id:id,
        }
    })
}


</script>




